<template>
    <view class="page">
        <hm-filter :menuTop="0" :filterData="menuList" :defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></hm-filter>
        <view class="content">
            <u-form labelPosition="left" labelWidth="90">
                <template v-for="(value,key) in subSellHouseList">
                    <view style="margin: 20rpx auto;text-align: center">
                        <text>{{value.name + '（共'+ value.h_date.length +'间）'}}</text>
                    </view>

                    <view class="table">
                        <view class="tr bg-w">
                            <view class="th" style="width: 10%"><view style="width: 36rpx"></view></view>
                            <view class="th">房号</view>
                            <view class="th">租金</view>
                            <view class="th">佣金补贴</view>
                            <view class="th">租期</view>
                            <view class="th">招租信息</view>
                            <view class="th">费用说明</view>
                            <view class="th">缴费方式</view>
                            <view class="th">房间设施</view>
                            <view class="th">公共设施</view>
                            <view class="th">现金补贴</view>
                        </view>
                        <template v-for="(item,index) in value.h_date">
                            <view class="tr" :class="index % 2 == 0 ? 'bg-g' :'' ">
                                <view class="td" style="width: 10%" @click.stop.prevent="setSelect(item)">
                                    <he-radio :is-change="false" :value="item.is_selected"></he-radio>
                                </view>
                                <view class="td" style="font-size: 16rpx">{{item.name}}</view>

                                <view class="td" @click="clickPickerHandler('lease_priec',key,index)">{{Number(item.lease_priec)}}</view>
                                <td-picker :show="item.lease_priecShow" title="租金" :default-num="item.lease_priec" unit="个月"
                                           @confirm="confirmPickerHandler('lease_priec',key,index,$event)" @cancel="cancelPickerHandler('lease_priec',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('commission_percentage',key,index)">{{item.commission_percentage + '%' || '设置'}}</view> <!--佣金补贴-->
                                <input-picker :show="item.commission_percentageShow" title="佣金补贴" :default-num="item.commission_percentage"
                                              @confirm="confirmPickerHandler('commission_percentage',key,index,$event)" @cancel="cancelPickerHandler('commission_percentage',key,index)"></input-picker>

                                <view class="td" @click="clickPickerHandler('lease_term',key,index)">{{item.lease_term || '设置'}}</view> <!--租期-->
                                <td-picker :show="item.lease_termShow" title="租期" :default-num="item.lease_term" unit="个月"
                                           @confirm="confirmPickerHandler('lease_term',key,index,$event)" @cancel="cancelPickerHandler('lease_term',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('rent_msg',key,index)">设置</view> <!--招租信息-->
                                <td-picker :show="item.rent_msgShow" title="招租信息" :default-num="item.rent_msg" content="textarea"
                                           @confirm="confirmPickerHandler('rent_msg',key,index,$event)" @cancel="cancelPickerHandler('rent_msg',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('cost_msg',key,index)">设置</view> <!--费用说明-->
                                <td-picker :show="item.cost_msgShow" title="费用说明" :default-num="item.cost_msg" content="textarea"
                                           @confirm="confirmPickerHandler('cost_msg',key,index,$event)" @cancel="cancelPickerHandler('cost_msg',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('pay',key,index)">设置</view> <!--缴费方式-->
                                <u-picker :show="item.payShow" :columns="payTypeColumns" keyName="label" :defaultIndex="defaultPayTypeIndex"
                                          @confirm="confirmPickerHandler('pay',key,index,$event)" @cancel="cancelPickerHandler('pay',key,index)"></u-picker>


                                <view class="td" @click="clickPickerHandler('room',key,index)">设置</view> <!--房间设施-->
                                <td-picker :show="item.roomShow" title="房间设施" content="tag" :tag-list="roomData"
                                           @confirm="confirmPickerHandler('room',key,index,$event)" @cancel="cancelPickerHandler('room',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('public',key,index)">设置</view> <!--公共设施-->
                                <td-picker :show="item.publicShow" title="公共设施" content="tag" :tag-list="publicData"
                                           @confirm="confirmPickerHandler('public',key,index,$event)" @cancel="cancelPickerHandler('public',key,index)"></td-picker>

                                <view class="td" @click="clickPickerHandler('subsidy',key,index)">{{item.subsidy + '%' || '设置'}}</view> <!--现金补贴-->
                                <subsidy-picker :show="item.subsidyShow" title="现金补贴" :default-num="item.subsidy"
                                                @confirm="confirmPickerHandler('subsidy',key,index,$event)" @cancel="cancelPickerHandler('subsidy',key,index)"></subsidy-picker>
                            </view>
                        </template>
                    </view>
                    <u-gap height="50"></u-gap>
                </template>
            </u-form>


            <u-loadmore :status="loadStatus" />
            <view class="safe-area-inset-bottom"></view>
            <view class="he-settlement">
                <view class="footer">
                    <view class="info">
                        <view style="display: flex;align-items: center" @click.stop="setAll">
                            <he-radio :is-change="false" v-model="all"></he-radio>
                            <view class="he-select__all" style="font-weight: bold">全选</view>
                        </view>
                        <view class="cbox" style="margin-left: 10rpx">
                            <text class="he-select__all">共选中{{radio}}间房源</text>
                        </view>
                    </view>
                    <view style="width: 250rpx">
                        <u-button type="primary" text="发布" @click="publish"></u-button>
                    </view>
                </view>
                <view class="safe-area-inset-bottom"></view>
            </view>
        </view>
    </view>
</template>

<script>
    import HmFilter from "../../../components/hm-filter";
    import heRadio from "../../../components/he-radio.vue";
    import inputPicker from '../../../components/input-picker';
    import subsidyPicker from '../../../components/subsidy-picker';
    import tdPicker from '../../../components/td-picker';
    export default {
        name: "custom",
        components:{
            HmFilter, heRadio, inputPicker, subsidyPicker, tdPicker
        },
        data(){
            return{
                loadStatus: 'nomore',
                s_id: '',
                type: '',
                all: false,
                radio: 0,
                subSellHouseList:[],
                publicData:[],
                roomData:[],
                menuList:[
                    {
                        "name":'全部小区',
                        "type": 'radio',
                        "submenu": [
                            {
                                "name": '请选择小区',
                                "submenu": [{
                                    "name": "不限",
                                    "value": ""
                                }]
                            },
                        ]
                    },
                    {
                        "name":'出租类型',
                        "type": 'radio',
                        "submenu": [{
                            "name": "请选择出租类型",
                            "submenu": [{
                                'name': '不限',
                                'value': ""
                            }, {
                                'name': '分散式整租',
                                'value': '3'
                            }, {
                                'name': '分散式合租',
                                'value': '2'
                            }, {
                                'name': '分散式公寓',
                                'value': '1'
                            }]
                        }]
                    },
                ],

                payTypeColumns:[
                    [{label: '押一', id: 1}, {label: '押二', id: 2}, {label: '押三', id: 3}, {label: '押四', id: 4},
                        {label: '押五', id: 5}, {label: '押六', id: 6}, {label: '押十二', id: 7},],
                    [{label: '付一', id: 1}, {label: '付二', id: 2}, {label: '付三', id: 3}, {label: '付四', id: 4},
                        {label: '付五', id: 5}, {label: '付六', id: 6}, {label: '付十二', id: 7},]
                ],
                defaultPayTypeIndex:[0,0],
                option:{
                    commission_percentage:'',
                    rent_msg:'',
                    cost_msg:'',
                    lease_term:'',
                    deposit:'',
                    cope_with:'',
                    room_facilities_id:[],
                    public_room_facilities_id:[],

                    // 现金补贴
                    subsidy:'',
                },
            };
        },
        onLoad(option){
            this.option = option;
            this.option.room_facilities_id = JSON.parse(option.room_facilities_id);
            this.option.public_room_facilities_id = JSON.parse(option.public_room_facilities_id);
            this.roomData = JSON.parse(option.roomData);
            this.publicData = JSON.parse(option.publicData);
            this.defaultPayTypeIndex = JSON.parse(option.defaultPayTypeIndex);
            this.getUnSellList();
        },
        methods:{
            confirm(e) {
                this.s_id = e.value[0][0];
                this.type = e.value[1][0];

                this.getUnSellList();
            },

            setSelect(item){
                item.is_selected = !item.is_selected;
                this.calcRadioCount();
            },
            setAll(){
                this.all = !this.all;
                for (let i = 0; i < this.subSellHouseList.length; i++) {
                    for (let j = 0; j < this.subSellHouseList[i].h_date.length; j++) {
                        this.subSellHouseList[i].h_date[j].is_selected = this.all;
                    }
                }
                this.calcRadioCount();
            },
            calcRadioCount(){
                let count = 0;
                for (let i = 0; i < this.subSellHouseList.length; i++) {
                    for (let j = 0; j < this.subSellHouseList[i].h_date.length; j++) {
                        if (this.subSellHouseList[i].h_date[j].is_selected) {
                            count++;
                        }
                    }
                }
                this.radio = count;
            },
            getUnSellList(){
                let data = {u_id: uni.getStorageSync('u_id'), s_id: this.s_id, type: this.type};
                uni.$u.http.get('/api.php/house/wait_distribution_house'  + uni.$u.queryParams(data)).then(res => {
                    for (let i = 0; i < res.length; i++) {
                        this.menuList[0].submenu[0].submenu.push({
                            'name':res[i].name,
                            'value' :res[i].id
                        })
                        for (let j = 0; j < res[i].h_date.length; j++) {
                            res[i].h_date[j].is_selected = false;
                            res[i].h_date[j].lease_priecShow = false;
                            res[i].h_date[j].commission_percentageShow = false;
                            res[i].h_date[j].subsidyShow = false;
                            res[i].h_date[j].lease_termShow = false;
                            res[i].h_date[j].rent_msgShow = false;
                            res[i].h_date[j].cost_msgShow = false;
                            res[i].h_date[j].roomShow = false;
                            res[i].h_date[j].publicShow = false;
                            res[i].h_date[j].payShow = false;


                            res[i].h_date[j].commission_percentage = this.option.commission_percentage;
                            res[i].h_date[j].rent_msg = this.option.rent_msg;
                            res[i].h_date[j].cost_msg = this.option.cost_msg;
                            res[i].h_date[j].lease_term = this.option.lease_term;
                            res[i].h_date[j].deposit = this.option.deposit;
                            res[i].h_date[j].cope_with = this.option.cope_with;
                            res[i].h_date[j].room_facilities_id = this.option.room_facilities_id;
                            res[i].h_date[j].public_room_facilities_id = this.option.public_room_facilities_id;
                            res[i].h_date[j].subsidy = this.option.subsidy;
                            res[i].h_date[j].is_subsidy = this.option.is_subsidy;
                            res[i].h_date[j].is_commission = this.option.is_commission;
                        }
                    }
                    this.subSellHouseList = res;
                });
            },
            clickPickerHandler(name,key,index){
                this.subSellHouseList[key].h_date[index][`${name}Show`] = true;
                uni.hideKeyboard();
            },
            confirmPickerHandler(name,key,index,e){
                if (name === 'pay') {
                    this.subSellHouseList[key].h_date[index].deposit = this.payTypeColumns[0][e.indexs[0]].id;
                    this.subSellHouseList[key].h_date[index].cope_with = this.payTypeColumns[1][e.indexs[1]].id;
                } else if (name === 'room') {
                    this.subSellHouseList[key].h_date[index].room_facilities_id = e;
                } else if (name === 'public') {
                    this.subSellHouseList[key].h_date[index].public_room_facilities_id = e;
                } else if (name === 'subsidy' || name === 'commission_percentage' ) {
                    if (this.subSellHouseList[key].h_date[index].subsidy > 0) {
                        this.subSellHouseList[key].h_date[index].is_subsidy = 2;
                    }
                    if (this.subSellHouseList[key].h_date[index].commission_percentage > 0) {
                        this.subSellHouseList[key].h_date[index].is_commission = 1;
                    }

                }else if (name === 'lease_priec'){
                    if ( this.subSellHouseList[key].h_date[index].lease_priec !== e ){
                        uni.showLoading({title: '正在修改'});
                        uni.$u.http.post('/api.php/house/price_up', {
                            h_id: this.subSellHouseList[key].h_date[index].id,
                            price: e,
                        }).then(res => {
                            uni.hideLoading();
                            this.subSellHouseList[key].h_date[index].lease_priec = e;
                            uni.showToast({
                                title: '修改成功', //提示文字
                                duration: 1000, //显示时长
                                icon: "success", //图标，支持"success"、"loading"
                            });
                        });
                    }
                } else {
                    this.subSellHouseList[key].h_date[index][name] = e;
                }

                this.cancelPickerHandler(name,key,index);
            },
            cancelPickerHandler(name,key,index){
                this.subSellHouseList[key].h_date[index][`${name}Show`] = false;
            },
            publish(){
                let array = [];
                for (let i = 0; i < this.subSellHouseList.length; i++) {
                    for (let j = 0; j < this.subSellHouseList[i].h_date.length; j++) {
                        if (this.subSellHouseList[i].h_date[j].is_selected ){
                            array.push({
                                type: '1',
                                u_id: uni.getStorageSync('u_id'),
                                h_id: this.subSellHouseList[i].h_date[j].id,
                                is_commission: this.subSellHouseList[i].h_date[j].is_commission,
                                commission_percentage: this.subSellHouseList[i].h_date[j].commission_percentage,
                                rent_msg: this.subSellHouseList[i].h_date[j].rent_msg,
                                cost_msg: this.subSellHouseList[i].h_date[j].cost_msg,
                                lease_term: this.subSellHouseList[i].h_date[j].lease_term,
                                deposit: this.subSellHouseList[i].h_date[j].deposit,
                                cope_with: this.subSellHouseList[i].h_date[j].cope_with,
                                room_facilities_id: this.subSellHouseList[i].h_date[j].room_facilities_id,
                                public_room_facilities_id: this.subSellHouseList[i].h_date[j].public_room_facilities_id,
                                is_subsidy: this.subSellHouseList[i].h_date[j].is_subsidy,
                                subsidy: this.subSellHouseList[i].h_date[j].subsidy,
                            })
                        }
                    }
                }

                uni.showLoading({title: '正在发布'});
                uni.$u.http.post('/api.php/house/house_distribution', array).then(res => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '添加成功', //提示文字
                        duration: 1000, //显示时长
                        icon: "success", //图标，支持"success"、"loading"
                        success:function () {
                            uni.navigateBack({delta: 2});
                        }
                    });
                });
            }
        }

    }
</script>

<style lang="scss" scoped>

    .content{
        padding-top: 100rpx;
    }

    .table {
        border: 0px solid darkgray;
    }
    .tr {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 3rem;
        align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
        font-size: 12px;
    }
    .bg-w{
        background: snow;
    }
    .bg-g{
        background: #E6F3F9;
    }
    .th {
        width: 40%;
        justify-content: center;
        background-color: rgb(64, 158, 255);
        color: #fff;
        display: flex;
        height: 3rem;
        align-items: center;

        font-size: 13px;
        padding: 0 2rpx;
    }

    .he-settlement {
        position: fixed;
        bottom: var(--window-bottom);
        width: 100%;
        min-height: 96px;
        background: #FFFFFF;
        z-index: 2;
        border-top: 1rpx solid #c0c4cc;
    }
    .he-select__all {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
        margin-left: 16rpx;
    }

    .footer{
    @include flex(row);
        justify-content: space-between;
        padding: 20rpx 20rpx 0 20rpx;

        .info{
            @include flex(row);
            justify-content: flex-start;
            align-items: center;
            flex: 9;
            margin-right: 20rpx;
        }
    }
</style>